<template>
  <div class="body_bgi full p_10 relative">
    <bigscreen-header headerName="羊详情" />

    <div class="w_80_p m_0_auto h_full-200 flex_row_between p_10 gap_10">
      <!-- 1 -->
      <div class="w_50_p h_full p_10 bgc_151926 border_radius_10">
        <div class="full chart_box_bgi_1 relative">
          <el-carousel 
            class="color_fff" 
            :autoplay="false" 
            v-if="sheepInfo.images"
          >
            <el-carousel-item class="full" v-for="(item, index) in formatAnimalImg(sheepInfo.images)" :key="index">
              <img 
                class="h_full aspect_ratio_16_9 border_radius_5 cursor object_fit_contain" 
                :src="item" alt=""
              >        
            </el-carousel-item>
            <!-- <el-carousel-item>
              <sheep-tree :chartData="chartData" />
            </el-carousel-item> -->
          </el-carousel>

          <!-- <div ></div> -->
          <img 
            v-else
            class="h_70_p aspect_ratio_16_9 border_radius_5 cursor object_fit_contain absolute_center" 
            src="../assets/image/sheep.png" alt=""
          >       
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_50_p h_full p_10 bgc_151926 border_radius_10">
        <el-tabs v-model="activeTabName">
          <el-tab-pane label="基本信息" name="first">
            <div class="full chart_box_bgi_1 color_fff p_10">
              <!-- <div class="fw_bold text_center fs_2vw main_text"><span>基本信息</span></div> -->
              <div class="w_90_p m_0_auto color_fff fs_1_5vw mt_10">
                <div class="w_50_p pl_10 pv_10">地区: {{ sheepInfo.townName }}</div>
                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">养殖户: {{ sheepInfo.yzhName }}</div>
                  <div class="w_50_p pl_10 pv_10">产毛量: {{ sheepInfo.maoCount }} </div>
                </div>
               
                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">净重: {{ sheepInfo.netWeight }} kg</div>
                  <div class="w_50_p pl_10 pv_10">密度: {{ sheepInfo.density }} </div>
                </div>

                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">弯曲度: {{ sheepInfo.wanQu }} </div>
                  <div class="w_50_p pl_10 pv_10">细度: {{ sheepInfo.xiDu }} </div>
                </div>

                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">弯曲度: {{ sheepInfo.wanQu }} </div>
                  <div class="w_50_p pl_10 pv_10">细度: {{ sheepInfo.xiDu }} </div>
                </div>

                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">弯曲度: {{ sheepInfo.wanQu }} </div>
                  <div class="w_50_p pl_10 pv_10">细度: {{ sheepInfo.xiDu }} </div>
                </div>

                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">油汗: {{ sheepInfo.oilSweat }} </div>
                  <div class="w_50_p pl_10 pv_10">均匀度: {{ sheepInfo.uniformity }} </div>
                </div>
                
                <div class="w_full flex_row_between">
                  <div class="w_50_p pl_10 pv_10">腹毛: {{ sheepInfo.fuMao }} </div>
                </div>

              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="评分信息" name="sec">
            <div class="full scroll_box overflow_y_auto">
              <div class="w_full flex_row_start">
                <div class="w_30_p h_80 lh_80 fs_1_5vw main_text text_center color_fff"> 
                  {{ sheepInfo.sheepNumber }} 参赛羊
                </div>

                <div class="w_50_p h_80 lh_80 fs_1_5vw fw_bold main_text text_center main_text"> 
                  最终得分 {{ sheepInfo.totalScore }} 分
                </div>
              </div>
              
              <!-- <div 
                class="w_full h_80 lh_80 flex_row_between color_999 border_b_1_s_ccc fs_2vw bgc_fff border_radius_10 mb_10" 
                v-for="(item, index) in scoreList" :key="index"
              >
                <div class="w_80 h_80 p_5">
                  <img class="full border_radius_10" src="../assets/image/user.png" alt="">
                </div>

                <div class="w_40_p ml_20">评委 {{ item.judgeId }}</div>
                <div class="w_50_p main_text">{{ item.totalScore }}分</div>
              </div> -->
            </div>
          </el-tab-pane>
        </el-tabs>
        
      </div>
    </div>

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getSheepScoreDetail } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'SheepDetail',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        contestId: null,
        rfid: null,

        activeTabName: 'first',
        sheepInfo: {},

        scoreList: []
      }
    },
    async mounted() {
      let contestId = this.$route.params.contestId
      let rfid = this.$route.params.rfid

      this.contestId = contestId
      this.rfid = rfid

      // 获取 羊 详情 
      this.getSheepScoreDetail(contestId, rfid)
    },
    methods: {
      async getSheepScoreDetail(contestId, rfid) {
        let res = await getSheepScoreDetail(contestId, rfid)
        try {
          if (res.code == 1000 && res.data.id) {
            this.sheepInfo = res.data
            this.scoreList = res.data.sheepScoreList
          }
        } catch(err) {
          console.log('获取 羊评分信息失败 : ', err);
        }
      },

      // 格式化 羊 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list
      },

      formatAnimalGender() {

      },

      formatLevel() {

      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #E5B395 !important; }
  .el-tabs__active-bar { background-color: #E5B395 !important; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }
</style>